<template>
	<view class="serch_view">
		<view class="serch_box">
			<input type="text" :placeholder="placeholder" v-model="keywords" confirm-type="search"
				@input="$emit('input',keywords)" @confirm="$emit('submit',keywords)">

			<!-- <view class="btn" @click="$emit('submit',keywords)">
				<image src="@/static/images/search.png"></image>
				<text class="text">搜索</text>
			</view> -->

			<view class="btn" @click="cancel" v-if="keywords.length">
				<text class="text">取消</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			placeholder: {
				type: String,
				default: "搜索商品名称、编码"
			}
		},

		data() {
			return {
				keywords: ""
			}
		},
		methods: {
			cancel() {
				this.keywords = "";
				// this.$emit('cancel', this.keywords)
				this.$emit('submit', this.keywords)

			}
		}
	}
</script>

<style scoped lang="scss">
	.serch_view {
		padding: 24rpx 32rpx;
		box-sizing: border-box;

		.serch_box {
			height: 64rpx;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			border: 2rpx solid rgba(255, 129, 51, 0.5);
			padding: 0 10rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			input {
				flex: 1;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}

			.btn {
				width: 118rpx;
				height: 44rpx;
				background: linear-gradient(131deg, #FF8133 0%, #FF8133 100%);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 24rpx;
					height: 24rpx;
				}

				text {
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 1;
					margin-left: 6rpx;
				}
			}
		}
	}
</style>